<template>
  <div class="card-header">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">班级每组薪资</h6>
      <div id="btns">
        <button 
        type="button" class="btn btn-xs"
        v-for="(item,idx) in Object.keys(groupData)"
        :class="{'btn-blue':curIdx === idx }"
        @click="hClick(idx)"
        :key="idx">{{ item }}</button>

      </div>
    </div>
  </div>
  <div class="card-body p-0" id="lines"></div>
</template>
<script setup>
import {  watch, ref, onMounted } from 'vue'
import { initEcharts } from '../utils/echart'
const props = defineProps({
  groupData: {
    type: Object,
  }
})
let myEchart = null

onMounted(()=> myEchart = initEcharts('#lines'))

const curIdx = ref(0)
const hClick = (idx) => {
  const data = props.groupData[idx+1]
  curIdx.value = idx
  option.xAxis.data = data.map(item => item.name)
  console.log('hClick', data, idx,  data,option)
  option.series[0].data = data.map(item => item.hope_salary)
  option.series[1].data = data.map(item => item.salary)
  myEchart.setOption(option)
}

watch(() => props.groupData, (newValue, oldValue) => {
  initGroupChart(newValue)
})

// 每一组的薪资
const option = {
  grid: {
    left: 70,
    top: 30,
    right: 30,
    bottom: 50,
  },
  xAxis:{
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#ccc',
        type: 'dashed',
      },
    },
    axisLabel: {
      color: '#999',
    }
  },
  
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
  },
  tooltip: {
    trigger: 'item',
  },
  color: [
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: '#34D39A', // 0% 处的颜色
        },
        {
          offset: 1,
          color: 'rgba(52,211,154,0.2)', // 100% 处的颜色
        },
      ],
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: '#499FEE', // 0% 处的颜色
        },
        {
          offset: 1,
          color: 'rgba(73,159,238,0.2)', // 100% 处的颜色
        },
      ],
    },
  ],
  series:[{
    // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
    // data: data[1].map((item) => item.hope_salary),
    type: 'bar',
    name: '期望薪资',
  },
  {
    // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
    // data: data[1].map((item) => item.salary),
    type: 'bar',
    name: '就业薪资',
  }]
}
const initGroupChart = (data) => {
  // 初始化图表
  option.xAxis.data = data[1].map((item) => item.name)
  option.series[0].data = data[1].map((item) => item.hope_salary)
  option.series[1].data = data[1].map((item) => item.salary)
  myEchart.setOption(option)
}
</script>